<template>
  <div class="asset-selection-cotent">
    <div class="asset-title">资产选择</div>
    <!-- 过滤框 -->
    <div class="asset-filter">
      <a-input-search class="common-input" v-model="searchValue" placeholder="请输入资产名称搜索" @blur="() => {
        page.value.page = 1;
        getList()
      }
        " />
      <div class="select-num">
        已选<span>{{ selectedData.length }}</span>项
        <a-link @click="selectedData = []">取消</a-link>
      </div>
    </div>
    <CommonTable :tableData="listData" :columnsData="columns1" :pageTotal="page.total" isSelecteRow
      v-model:selectedData="selectedData" :operatorCollapse="2" @handlerPaginationChange="handlerPaginationChange"
      @handlerSelectRow="handlerSelectRow" @handlerSelectAllRow="handlerSelectAllRow">
    </CommonTable>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { columns1 } from './values';
import * as api from '@/api/compliance_registration/register_compliance/register_compliance'
const page = ref({
  page: 1,
  page_size: 10,
  total: 0
});
const searchValue = ref('');
const listData = ref([])

let selectedData = ref([]);
const emits = defineEmits(['getSelectedData']);
/* 获取资产数据 */
const getList = async () => {
  let params = {
    page: page.value.page,
    page_size: page.value.page_size,
    key: searchValue.value
  }
  let res = await api.assetSelectList(params);
  listData.value = res.data;
  page.value.total = res.total;
}

/* 获取多选数据 */
const handlerSelectRow = (data: Array) => {
  selectedData.value = data;
  let list = toIdGetData(data);
  emits('getSelectedData', list);
}

/* 根据ID获取对应ID的数据 */
const toIdGetData = (ids: Array) => {
  let data = listData.value.filter((item: any) => ids.includes(item.id));
  return data;
}
/* 获取全选数据 */
const handlerSelectAllRow = (boo: boolean) => {
  if (boo) {
    selectedData.value = listData.value.map((item: any) => item.id);
  } else {
    selectedData.value = [];
  }
}

/* 分页 */
const handlerPaginationChange = (type: string, value: any) => {
  if (type == 'num') {
    page.value.page = value;
  } else {
    page.value.page = 1;
    page.value.page_size = value;
  }
  getList();
}

onMounted(() => {
  getList();
})
</script>
<style lang="less" scoped>
@import '../index.less';

.asset-selection-cotent {
  padding: 20px 25px;
}

.asset-filter {
  margin: 20px 0 15px 0;
}

.select-num {
  margin-top: 15px;
  color: #465A80;
  letter-spacing: 1px;
}
</style>